import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import { RouterProvider } from "react-router-dom";
import router from "./router";
import { Layout, Menu } from "antd";
import Sider from "antd/es/layout/Sider";
import { Content, Header } from "antd/es/layout/layout";
import React from "react";
import {
  CaretRightOutlined,
  FullscreenOutlined,
  ZoomInOutlined,
} from "@ant-design/icons";

export default class App extends React.Component {
  // constructor(props) {}
  routing = async (a: any) => {
    console.log("rounting ", a);
    // Navigate(a.key);
    return await router.navigate(a.key);
  };
  render(): React.ReactNode {
    return (
      <>
        <Layout className="app">
          <Header>
            <div>
              <a href="https://vitejs.dev" target="_blank">
                <img src={viteLogo} className="logo" alt="Vite logo" />
              </a>
              <a href="https://react.dev" target="_blank">
                <img src={reactLogo} className="logo react" alt="React logo" />
              </a>
            </div>
          </Header>
          <Layout className="beyond">
            <Sider className="aside">
              <Menu onClick={this.routing}>
                <Menu.Item key="/a">
                  <CaretRightOutlined />
                  page a
                </Menu.Item>
                <Menu.Item key="/b">
                  <FullscreenOutlined />
                  page b
                </Menu.Item>
                <Menu.Item key="/appEx">page appEx</Menu.Item>
                <Menu.Item key="/">/</Menu.Item>
                <Menu.Item key="/first">
                  <ZoomInOutlined />
                  FirstView
                </Menu.Item>
                <Menu.Item key="/second">
                  <ZoomInOutlined />
                  SecondView
                </Menu.Item>
                <Menu.Item key="/practiseFirst">
                  <ZoomInOutlined />
                  First Practise
                </Menu.Item>
                <Menu.Item key="/practiseSecond">
                  <ZoomInOutlined />
                  Second Practise
                </Menu.Item>
              </Menu>
            </Sider>
            <Content className="main">
              <RouterProvider router={router} />
            </Content>
          </Layout>
        </Layout>
      </>
    );
  }
}
